<template>
  <div ref="echartDom"></div>
</template>

<script setup>
import {ref, defineProps, onMounted, onUnmounted, inject, shallowRef, defineExpose, defineEmits} from 'vue'
import {pxToRem} from "@/utils/index";

const props = defineProps({
  lineData: {
    type: Object,
    default: () => {
    }
  },
  dialogData: {
    type: Object,
    default: () => ({
      fontSizeTimes: 1
    })
  }
});

const echartDom = ref(null);
const myChart = shallowRef(null);
const echarts = inject('echarts');

const initEchart = () => {
  if (echartDom.value) {
    myChart.value = echarts.init(echartDom.value);
    let option = {
      tooltip: {
        trigger: 'axis',
        formatter: (val) => {
          const tempArr = val?.filter(x => x.value || x.value == 0)
          if (tempArr?.length === 2) {
            return (
              `${tempArr[0].name}` + '<br>' +
              `${tempArr[0].seriesName}： ${tempArr[0].value}${props?.lineData?.yAxisName}` + '<br>' +
              `${tempArr[1].seriesName}： ${tempArr[1].value}${tempArr[1]?.data?.unit}`
            )
          } else {
            return (
              `${tempArr[0].name}` + '<br>' +
              `${tempArr[0].seriesName}： ${tempArr[0].value}${tempArr[0]?.data?.unit || props?.lineData?.yAxisName}`
            )
          }
        }
      },
      legend: {
        x: 'center',
        top: `${props?.dialogData?.fontSizeTimes === 1 ? 7 : 0}%`,
        itemWidth: pxToRem(10 * props?.dialogData?.fontSizeTimes),
        itemHeight: pxToRem(10 * props?.dialogData?.fontSizeTimes),
        textStyle: {
          color: 'white',
          fontSize: pxToRem(12 * props?.dialogData?.fontSizeTimes),
          padding: [pxToRem(2), 0, 0],
          rich: {}
        },
        tooltip: {
          show: true
        },
        formatter: (params) => {
          let val = '';
          if (params.length > 5) {
            val = `${params.substr(0, 5)}...`;
            return val;
          } else {
            return params;
          }
        },
        data: props?.lineData?.legendData
      },
      grid: {
        left: '2%',
        right: '2%',
        bottom: 0,
        top: `${props?.dialogData?.fontSizeTimes === 1 ? 30 : 20}%`,
        containLabel: true
      },
      dataZoom: { // 数据过多拖动逻辑
        type: "slider",
        startValue: 0,
        height: pxToRem(20),
        bottom: 0
      },
      xAxis: {
        min: 0,
        type: 'category',
        boundaryGap: false,
        data: props?.lineData?.xAxisData,
        axisLabel: {
          fontSize: pxToRem(9 * props?.dialogData?.fontSizeTimes),
          color: 'white',
          fontWeight: 'lighter'
        },
        axisLine: {
          show: true // 不显示坐标轴线
        }
      },
      yAxis: [
        {
          min: 0,
          max: (value) => value.max || 200,
          name: props?.lineData?.yAxisName,
          nameTextStyle: {
            color: 'white',
            fontSize: pxToRem(12 * props?.dialogData?.fontSizeTimes),
            align: 'left',
            padding: [0, 0, 0, pxToRem(-15 * props?.dialogData?.fontSizeTimes)]
          },
          nameGap: pxToRem(props?.dialogData?.fontSizeTimes === 1 ? 15 : 35),
          tooltip: {
            show: true
          },
          axisTick: {
            show: false // 不显示坐标轴刻度线
          },
          axisLine: {
            show: true, // 不显示坐标轴线
          },
          splitLine: {
            show: false // 不显示网格线
          },
          axisLabel: {
            fontSize: pxToRem(9 * props?.dialogData?.fontSizeTimes),
            color: 'white'
          },
          position: 'left',
        },
        {
          max: (value) => value.max || 10,
          name: props?.lineData?.yAxisRightName,
          nameTextStyle: {
            color: 'white',
            fontSize: pxToRem(12 * props?.dialogData?.fontSizeTimes),
            align: 'left',
            padding: [0, 0, 0, pxToRem(-23 * props?.dialogData?.fontSizeTimes)]
          },
          nameTruncate: {
            maxWidth: pxToRem(props?.dialogData?.fontSizeTimes === 1 ? 40 : 100),
            ellipsis: '...'
          },
          nameGap: pxToRem(props?.dialogData?.fontSizeTimes === 1 ? 15 : 35),
          tooltip: {
            show: true
          },
          axisTick: {
            show: false // 不显示坐标轴刻度线
          },
          axisLine: {
            show: false, // 不显示坐标轴线
          },
          splitLine: {
            show: false // 不显示网格线
          },
          axisLabel: {
            fontSize: pxToRem(9 * props?.dialogData?.fontSizeTimes),
            color: 'white',
            formatter: `{value}${['人口自然增长率', '就业率'].includes(props?.lineData?.legendData?.[1]?.name) ? '%' : ''}`
          },
          position: 'right',
        }
      ],
      series: [
        {
          data: props?.lineData?.seriesData?.[0],
          name: props?.lineData?.legendData?.[0]?.name,
          type: 'line',
          smooth: false,
          showSymbol: false,
          yAxisIndex: 0,
          itemStyle: {
            color: '#0E81FF'
          }
        },
        {
          data: props?.lineData?.seriesData?.[1],
          name: props?.lineData?.legendData?.[1]?.name,
          type: 'line',
          smooth: false,
          showSymbol: false,
          yAxisIndex: 1,
          itemStyle: {
            color: '#F8F364'
          }
        }
      ],
    }
    option && myChart.value.setOption(option, true);

    myChart.value.on("legendselectchanged", (params) => {
      event.stopPropagation();
    })
  }
}

const updateChart = () => {
  if (myChart.value) {
    myChart.value.dispose(); // 销毁旧图表实例
  }
  initEchart();
};

defineExpose({
  updateChart
})

onMounted(() => {
  initEchart();
  window.addEventListener("resize", updateChart);
})

onUnmounted(() => {
  window.removeEventListener("resize", updateChart);
})
</script>

<style scoped lang="less">
.h135 {
  height: 135px;
}
.dialog-h135 {
  width: 1120px;
  height: 500px;
}
</style>